import React from "react";
import "./Startcreate.css";
import one from './img/image.png'
import two from './img/image2.png'

const tools = [
  { label: "智能抠图" },
  { label: "智能设计"},
  { label: "AI造手办" },
  { label: "智能消除" },
  { label: "图片变清晰"},
  { label: "批量设计" },

];

const Startcreate = () => (
  <section className="startcreate-section">
    <div className="startcreate-title">开始创作</div>
    <div className="startcreate-row">
      {/* 左侧三大卡片 */}
      <div className="startcreate-card-list">
        {/* 自定义设计卡片 */}
        <div className="startcreate-card custom-design">
          <div className="startcreate-card-label custom">自定义设计</div>
          <div className="startcreate-card-content">
            <div className="startcreate-card-main">
              <div className="startcreate-card-desc">自定义尺寸/场景/智能...</div>
              <button className="startcreate-card-btn custom"><span className="icon-plus">＋</span></button>
            </div>
            {/* 动画小卡片 */}
            <div className="startcreate-float-card">
              <img src={one} alt="示意" />
            </div>
          </div>
        </div>
        {/* 图片编辑卡片 */}
        <div className="startcreate-card image-edit">
          <div className="startcreate-card-label edit">图片编辑</div>
          <div className="startcreate-card-content">
            <div className="startcreate-card-main">
              <div className="startcreate-card-desc">图片裁剪、滤镜、加水印</div>
              <button className="startcreate-card-btn edit"><span className="icon-edit">🖼️</span></button>
            </div>
            {/* 动画小卡片 */}
            <div className="startcreate-float-card">
              <img src={two} alt="示意" />
            </div>
          </div>
        </div>
        {/* AI创作卡片 */}
        <div className="startcreate-card ai-create">
          <div className="startcreate-card-label ai">AI创作</div>
          <div className="startcreate-card-content ai-flex">
            <div className="startcreate-card-main">
              <div className="startcreate-card-desc">元素可分层，可更改</div>
              <button className="startcreate-card-btn ai"><span className="icon-ai">🤖</span></button>
            </div>
            <div className="startcreate-card-feature-list">
              <div className="startcreate-feature-item">生成红金3D喜报</div>
              <div className="startcreate-feature-item">生成美漫CD封面</div>
              <div className="startcreate-feature-item">生成故障感海报</div>
              <div className="startcreate-feature-item">AI生成宫崎骏漫画</div>
            </div>

          </div>
        </div>
      </div>
      {/* 右侧创作工具九宫格 */}
      <div className="startcreate-tool-panel">
        <div className="startcreate-tool-title">创作工具</div>
        <div className="startcreate-tool-grid">
          {tools.map((tool) => (
            <div className="startcreate-tool-btn" key={tool.label}>
              <span>{tool.label}</span>
              {tool.tag && <span className={`tool-tag tag-${tool.tag.toLowerCase()}`}>{tool.tag}</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

export default Startcreate;
